<template>
  <div>
    <div>Todolist</div>

    <div>
      <input type="text" @keyup.13="addTask" v-model="value" />
      <div class="container">
        <div class="left-container">
          <div @click="change('un')" :class="{ active: current === 'un' }">
            未完成({{ unCount }})
          </div>
          <div
            @click="change('completed')"
            :class="{ active: current === 'completed' }"
          >
            已完成({{ completedCount }})
          </div>
          <div @click="change('all')" :class="{ active: current === 'all' }">
            全部({{ allCount }})
          </div>
        </div>
        <div class="right-container">
          <!-- <div
            v-for="item in list"
            :key="item.key"
            :class="['list-item', { checked: item.checked }]"
            @click="check(item.key)"
          >
            <div>{{ item.name }}</div>
            <button @click.stop="remove(item.key)">x</button>
          </div> -->
          <ListItem
            v-for="item in list"
            :key="item.key"
            :item="item"
            @check="check"
            @remove="remove"
          ></ListItem>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import ListItem from "./Listitem.vue";
export default {
  name: "Todolist",
  components: {
    ListItem,
  },
  data() {
    return {
      value: "",
      taskList: [],
      current: "un",
    };
  },
  methods: {
    addTask() {
      if (this.value) {
        this.taskList.push({
          name: this.value,
          checked: false,
          key: Math.random(),
        });
        this.value = "";
      }
    },
    check(key) {
      let index = _.findIndex(this.taskList, { key });
      this.taskList[index].checked = !this.taskList[index].checked;
    },
    remove(key) {
      let index = _.findIndex(this.taskList, { key });
      this.taskList.splice(index, 1);
    },
    change(v) {
      this.current = v;
    },
  },
  computed: {
    list() {
      if (this.current === "un") {
        return this.taskList.filter((item) => {
          return !item.checked;
        });
      } else if (this.current == "completed") {
        return this.taskList.filter((item) => {
          return item.checked;
        });
      } else {
        return this.taskList;
      }
    },
    unCount() {
      let array = this.taskList.filter((item) => {
        return !item.checked;
      });
      return array.length;
    },
    completedCount() {
      let array = this.taskList.filter((item) => {
        return item.checked;
      });
      return array.length;
    },
    allCount() {
      return this.taskList.length;
    },
  },
};
</script>

<style>
.container {
  display: flex;
  height: 800px;
  width: 800px;
}

.left-container {
  height: 100%;
  width: 200px;
  background-color: pink;
}

.right-container {
  flex: 1;
  background-color: rgb(168, 107, 138);
}

.list-item {
  display: flex;
  justify-content: space-between;
}

.checked {
  background-color: gray;
}

.active {
  background-color: gray;
}
</style>